<template>
  <div class="statis">
    <el-dropdown split-button @command="handleCommand">
      <span class="el-dropdown-link">
        选择类型查看(天 周 月)
        <!-- <el-icon class="el-icon--right"><arrow-down /></el-icon> -->
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="day">最近7天</el-dropdown-item>
          <el-dropdown-item command="week">每周</el-dropdown-item>
          <el-dropdown-item command="mound">每月</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <div id="main"></div>

    <el-dropdown split-button @command="handleOrderCommand">
      <span class="el-dropdown-link">
        选择类型查看(天 周 月)
        <!-- <el-icon class="el-icon--right"><arrow-down /></el-icon> -->
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="day">最近7天</el-dropdown-item>
          <el-dropdown-item command="week">每周</el-dropdown-item>
          <el-dropdown-item command="mound">每月</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <div id="order"></div>
 <!-- type="primary" -->
    <el-dropdown split-button  @command="handlePriceCommand">
      <span class="el-dropdown-link">
        选择类型查看(天 周 月)
        <!-- <el-icon class="el-icon--right"><arrow-down /></el-icon> -->
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="day">最近7天</el-dropdown-item>
          <el-dropdown-item command="week">每周</el-dropdown-item>
          <el-dropdown-item command="mound">每月</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>

    <div id="price"></div>

  </div>
</template>

<style scoped>
.el-dropdown {
  margin: 10px 0 20px 0;
}
#main {
  height: 300px;
}
#order {
  height: 300px;
}
#price {
  height: 300px;
}
.example-showcase {
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>

<script setup>
// import { onMounted } from "vue";
import * as echarts from "echarts";
import axios from "axios";
import { onMounted, reactive } from "@vue/runtime-core";
import { ArrowDown } from "@element-plus/icons-vue";

let params = { type: "day" };
let orderParams = { type: "day" };
let priceParams = { type: "day" };

let curType = "最近7天";
let curOrderType = "最近7天";
let curPriceType = "最近7天";

let dataList = reactive([]);
let tableList = reactive([]);

let orderdataList = reactive([]);
let ordertableList = reactive([]);

let priceDataList = reactive([]);
let priceableList = reactive([]);

const handleCommand = (command) => {
  params.type = command;

  if (command == "day") {
    curType = "最近7天";
  } else if (command == "week") {
    curType = "每周";
  } else if (command == "mound") {
    curType = "每月";
  }
  dataList = [];
  tableList = [];
  getData();
  //   ElMessage(`click on item ${command}`);
};

const handleOrderCommand = (command) => {
  orderParams.type = command;

  if (command == "day") {
    curOrderType = "最近7天";
  } else if (command == "week") {
    curOrderType = "每周";
  } else if (command == "mound") {
    curOrderType = "每月";
  }
  orderdataList = [];
  ordertableList = [];
  getOrderData();
};
const handlePriceCommand = (command) => {
  priceParams.type = command;

  if (command == "day") {
    curPriceType = "最近7天";
  } else if (command == "week") {
    curPriceType = "每周";
  } else if (command == "mound") {
    curPriceType = "每月";
  }
  priceDataList = [];
  priceableList = [];
  getPriceData();
};

function getData() {
  axios.post("/api/statis/chats", params).then((rs) => {
    console.log("rs.data.data", rs.data.data);
    rs.data.data.forEach((element) => {
      console.log("element", element);
      dataList.push(element.columnName);
      tableList.push(element.value);
      initChart();
    });
  });
}

function getOrderData() {
  axios.post("/api/statis/order", orderParams).then((rs) => {
    console.log("rs.data.data", rs.data.data);
    rs.data.data.forEach((element) => {
      console.log("element", element);
      orderdataList.push(element.columnName);
      ordertableList.push(element.value);

      initOrderChart();
    });
  });
}

function getPriceData() {
  axios.post("/api/statis/orderPrice", priceParams).then((rs) => {
    console.log("rs.data.data", rs.data.data);
    rs.data.data.forEach((element) => {
      console.log("element", element);
      priceDataList.push(element.columnName);
      priceableList.push(element.value);

      initPriceChart();
    });
  });
} 

getData();
getOrderData();
getPriceData();

const handleClick = () => {
  // eslint-disable-next-line no-alert
  alert("button click");

  initChart();
};

onMounted(() => {
  console.log("mounted");

  console.log("输出data值:", dataList);
  //   helloData();
});

// onMounted(() => {
//     initChart();

// });

const weekly = [
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
  "星期天",
];

function initChart() {
  let myChart = echarts.init(document.getElementById("main"));
  // 绘制图表
  myChart.setOption({
    title: { text: "用户提问统计:  " + curType,
            color: '#C28D21',//颜色
            fontSize: 40,//大小
            fontWeight:400,//
    
    },
    tooltip: {},
    xAxis: {
      type: "category",
      //   data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      //   data:weekly
      data: dataList,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        // data: [120, 200, 150, 80, 70, 110, 130],
        data: tableList,
        type: "bar",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    ],
  });
  window.onresize = function () {
    //自适应大小
    myChart.resize();
  };
}

function initOrderChart() {
  let myChart = echarts.init(document.getElementById("order"));
  // 绘制图表
  myChart.setOption({
    title: { text: "订单数量统计:  " + curOrderType },
    tooltip: {},
    xAxis: {
      type: "category",
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      data: orderdataList,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        //   data: [120, 200, 150, 80, 70, 110, 130],
        data: ordertableList,
        type: "line",
        symbol: "triangle",
        symbolSize: 20,
        lineStyle: {
          color: "#5470C6",
          width: 4,
          type: "dashed",
        },
        itemStyle: {
          borderWidth: 3,
          borderColor: "#EE6666",
          color: "yellow",
        },
      },
    ],
  });

  window.onresize = function () {
    //自适应大小
    myChart.resize();
  };
}


function initPriceChart() {
  let myChart = echarts.init(document.getElementById("price"));
  // 绘制图表
  myChart.setOption({
    title: { text: "订单价格统计:  " + curPriceType },
    tooltip: {},
    xAxis: {
      type: "category",
      // data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      data: priceDataList
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        // data: [150, 230, 224, 218, 135, 147, 260],
        data: priceableList,
        type: "line",
      },
    ],
  });

  window.onresize = function () {
    //自适应大小
    myChart.resize();
  };
}

function helloData() {
  console.log("输出name值:", tableList);
}

//   components: {},
//   mounted() {

//   },
</script>